<template>
  <div class="fontStyle">
    {{obj.output}}
  </div>
  <el-row class="allT myTimeLine" :class="dayModel===true?'lBColor':'dBColor'">
    <el-col :sm="{span:16,offset:6}">
      <div>
        <el-timeline>
          <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp">
            <router-link :to="{name:'page',query:{id:activity.id}}" :style="dayModel===true?'color:black':'color:white'">{{activity.content}}</router-link>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import EasyTyper from "easy-typer-js";
import axios from "axios"
export default {
  name: "TimeLine",
  data() {
    return {
      obj: {
        output: '',
        isEnd: false,
        speed: 90,
        singleBack: false,
        sleep: 0,
        type: 'normal',
        backSpeed: 40,
        sentencePause: false
      },
      activities: []
    };
  },
  computed:{
    dayModel(){
      return this.$store.state.dayModel;
    }
  },
  mounted() {
    axios.get("/year/listBlog").then( (res) => {
      for ( let key in res.data){
        this.activities.push({"content":key,size: 'large', type: 'primary'})
        // this.activities.push({"content":res.data[key]})
        for ( let i = 0 ; i < res.data[key].length ; i++){
          this.activities.push({"content":res.data[key][i].title,id:res.data[key][i].id,color: '#0BEC91',size: 'normal',timestamp: res.data[key][i].releaseDate})
        }
      }
    })
    const typed = new EasyTyper(this.obj,'生活不止眼前的苟且，还有诗和远方')
  }
}
</script>

<style scoped>
.fontStyle {
  text-align: center;
  font-size:25px;
  color: #34dfdc;
  position: relative;
  top: -200px;
}
.lBColor {
  background-color: white;

}
.dBColor {
  background-color: black;
}
.myTimeLine {
  box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
  margin-top: -100px;
  padding: 40px 0;
  border-radius: 10px;
}
</style>